<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 仪表盘</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <script src="./static/vendor/js/chart-4.5.0.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 统计卡片 */
        .stat-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .stat-card:hover::before {
            left: 100%;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }

        /* 玻璃态效果 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 图表容器 */
        .chart-container {
            position: relative;
            height: 300px;
        }

        /* 最新活动项 */
        .activity-item {
            transition: all 0.3s ease;
        }
        .activity-item:hover {
            transform: translateX(5px);
            background: rgba(102, 126, 234, 0.05);
        }

        /* 用户下拉菜单 */
        .user-dropdown {
            transform-origin: top right;
            transition: all 0.2s ease;
        }
        .user-dropdown.hidden {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
        }
        .user-dropdown.show {
            opacity: 1;
            transform: scale(1);
            pointer-events: all;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="user-dropdown hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">仪表盘</h2>
                        <p class="text-sm text-slate-500">信访数据分析概览</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- 通知图标 -->
                        <button class="relative p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-bell text-slate-600"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                        <!-- 全屏按钮 -->
                        <button id="fullscreenBtn" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-expand text-slate-600"></i>
                        </button>
                        <!-- 时间显示 -->
                        <div class="text-sm text-slate-600">
                            <i class="far fa-clock mr-1"></i>
                            <span id="currentTime"></span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-file-alt text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">1,234</span>
                        </div>
                        <p class="text-blue-100">总信访数量</p>
                        <p class="text-xs text-blue-200 mt-2">
                            <i class="fas fa-arrow-up mr-1"></i>
                            较上月增长 12%
                        </p>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-check-circle text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">856</span>
                        </div>
                        <p class="text-green-100">已处理</p>
                        <p class="text-xs text-green-200 mt-2">
                            <i class="fas fa-arrow-up mr-1"></i>
                            处理率 69.4%
                        </p>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-spinner text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">278</span>
                        </div>
                        <p class="text-yellow-100">处理中</p>
                        <p class="text-xs text-yellow-200 mt-2">
                            <i class="fas fa-minus mr-1"></i>
                            较上月持平
                        </p>
                    </div>

                    <div class="stat-card bg-gradient-to-br from-red-500 to-red-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-exclamation-circle text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">100</span>
                        </div>
                        <p class="text-red-100">待处理</p>
                        <p class="text-xs text-red-200 mt-2">
                            <i class="fas fa-arrow-down mr-1"></i>
                            较上月减少 8%
                        </p>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- 信访趋势图 -->
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-slate-800">信访趋势</h3>
                            <div class="flex space-x-2">
                                <button class="trend-btn px-3 py-1 text-sm rounded-lg bg-indigo-100 text-indigo-700" data-range="day">日</button>
                                <button class="trend-btn px-3 py-1 text-sm rounded-lg hover:bg-slate-100" data-range="week">周</button>
                                <button class="trend-btn px-3 py-1 text-sm rounded-lg hover:bg-slate-100" data-range="month">月</button>
                                <button class="trend-btn px-3 py-1 text-sm rounded-lg hover:bg-slate-100" data-range="year">年</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="trendChart"></canvas>
                        </div>
                    </div>

                    <!-- 类型分布饼图 -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-slate-800">类型分布</h3>
                            <select class="text-sm border border-slate-300 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>本月</option>
                                <option>上月</option>
                                <option>本季度</option>
                                <option>本年度</option>
                            </select>
                        </div>
                        <div class="chart-container">
                            <canvas id="typeChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 最新活动 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                    <h3 class="text-lg font-semibold text-slate-800 mb-6">最新活动</h3>
                    <div class="space-y-4">
                        <div class="activity-item flex items-start space-x-4 p-3 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-plus text-blue-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm text-slate-800">新增信访件 <span class="font-medium">#XF20240115001</span></p>
                                <p class="text-xs text-slate-500 mt-1">来自深圳市南山区 - 涉及环境污染问题</p>
                                <p class="text-xs text-slate-400 mt-2">5分钟前</p>
                            </div>
                        </div>

                        <div class="activity-item flex items-start space-x-4 p-3 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-green-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm text-slate-800">信访件 <span class="font-medium">#XF20240114023</span> 已处理完成</p>
                                <p class="text-xs text-slate-500 mt-1">处理人员：张晓明 - 处理时长：2天</p>
                                <p class="text-xs text-slate-400 mt-2">1小时前</p>
                            </div>
                        </div>

                        <div class="activity-item flex items-start space-x-4 p-3 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm text-slate-800">发现重复投诉问题</p>
                                <p class="text-xs text-slate-500 mt-1">福田区某小区噪音问题被投诉5次</p>
                                <p class="text-xs text-slate-400 mt-2">2小时前</p>
                            </div>
                        </div>

                        <div class="activity-item flex items-start space-x-4 p-3 rounded-lg">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-chart-line text-purple-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm text-slate-800">生成月度分析报告</p>
                                <p class="text-xs text-slate-500 mt-1">2024年1月信访数据分析报告已生成</p>
                                <p class="text-xs text-slate-400 mt-2">昨天</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
            userMenu.classList.toggle('show');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
                userMenu.classList.remove('show');
            }
        });

        // 时间显示
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('currentTime').textContent = timeString;
        }
        updateTime();
        setInterval(updateTime, 1000);

        // 全屏功能
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                fullscreenBtn.innerHTML = '<i class="fas fa-compress text-slate-600"></i>';
            } else {
                document.exitFullscreen();
                fullscreenBtn.innerHTML = '<i class="fas fa-expand text-slate-600"></i>';
            }
        });

        // 信访趋势图
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        const trendGradient = trendCtx.createLinearGradient(0, 0, 0, 300);
        trendGradient.addColorStop(0, 'rgba(102, 126, 234, 0.3)');
        trendGradient.addColorStop(1, 'rgba(102, 126, 234, 0.05)');

        const trendChart = new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日', '1月10日', '1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
                datasets: [{
                    label: '信访数量',
                    data: [45, 52, 48, 61, 55, 67, 58, 62, 59, 71, 65, 68, 72, 69, 75],
                    borderColor: 'rgb(102, 126, 234)',
                    backgroundColor: trendGradient,
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: 'rgb(102, 126, 234)',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        borderColor: 'rgb(102, 126, 234)',
                        borderWidth: 1,
                        cornerRadius: 8,
                        displayColors: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });

        // 类型分布饼图
        const typeCtx = document.getElementById('typeChart').getContext('2d');
        const typeChart = new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: ['环境污染', '噪音扰民', '市容管理', '交通问题', '其他'],
                datasets: [{
                    data: [35, 25, 20, 15, 5],
                    backgroundColor: [
                        'rgb(59, 130, 246)',
                        'rgb(16, 185, 129)',
                        'rgb(251, 191, 36)',
                        'rgb(239, 68, 68)',
                        'rgb(156, 163, 175)'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        borderColor: '#fff',
                        borderWidth: 1,
                        cornerRadius: 8,
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                },
                cutout: '60%'
            }
        });

        // 趋势图时间范围切换
        const trendBtns = document.querySelectorAll('.trend-btn');
        trendBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                trendBtns.forEach(b => {
                    b.classList.remove('bg-indigo-100', 'text-indigo-700');
                    b.classList.add('hover:bg-slate-100');
                });
                btn.classList.add('bg-indigo-100', 'text-indigo-700');
                btn.classList.remove('hover:bg-slate-100');
                
                // 这里可以更新图表数据
                const range = btn.dataset.range;
                console.log('切换到:', range);
            });
        });
    </script>
</body>
</html>